<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-tickets"></i>&nbsp;账号列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" v-loading="loading">
             <!--内容-->
                <div style="height:40px"></div>
                    <el-button @click="Addmanagementuser()" type="primary">新增管理用户</el-button>
                    <el-table :data="tableData"  style="width: 100%" >
                        <el-table-column prop="manage_userid" label="账户ID" width="100" align="center">
                        </el-table-column>
                        <el-table-column prop="login_name" label="登录名"  align="center">
                        </el-table-column>
                        <el-table-column prop="real_name" label="真实姓名"  align="center">
                        </el-table-column>
                        <el-table-column prop="Identity" label="身份" align="center">
                        </el-table-column>
                        <el-table-column label="操作"   align="center">
                            <template slot-scope="scope" >
                                <el-button size="small" type="text" @click="handleEdit(scope.$index, scope.row)">修改密码</el-button>
                                <el-button size="small" type="text" @click="ResetPasswords(scope.$index, scope.row)" >重置密码</el-button>
                                <el-button size="small" type="text" @click="Modifyuser(scope.$index, scope.row)" >修  改</el-button>
                                <el-button size="small" style="color: #F56C6C;" type="text" @click="DeleteUseru(scope.$index, scope.row)" >删  除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination" v-show="totalPages > 1">
                        <el-pagination v-if="paginationShow" @current-change="handleCurrentChange"  layout="prev, pager, next" :total="totalElements">
                        </el-pagination>
                    </div>
         
        </div>
            <!-- 修改密码弹出框 -->
            <el-dialog title="修改密码" :visible.sync="editVisible"  center >
                <el-form style="width:500px; margin:0 auto"  label-width="110px">
                    <el-form-item label="原密码：">
                    <el-input type="password" v-model="oldPwd" placeholder="请输入原密码" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="新密码：">
                    <el-input type="password" v-model="newPwd1" placeholder="请输入新密码" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码：">
                    <el-input type="password" @keyup.enter.native="onSubmit" v-model="newPwd2" placeholder="请再次输入新密码"  style="width:300px"></el-input>
                </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="confirm()">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 重置密码弹出框 -->
            <el-dialog title="重置密码" :visible.sync="ResetPopup"  center >
                <el-form style="width:500px; margin:0 auto"  label-width="110px">
                    <el-form-item label="重置密码：">
                        <el-input type="password" v-model="ResetPassword" placeholder="请输入重置新密码" style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="确认重置密码：">
                        <el-input type="password" v-model="ResetPassword1" @keyup.enter.native="onresetPassword" placeholder="请再次重置输入新密码"  style="width:300px"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="ConfirmReset()">确定重置</el-button>
                </div>
            </el-dialog>
            <!-- 修改用户信息弹出框 -->
            <el-dialog title="修改管理用户信息" :visible.sync="ModifyPopup"  center >
                <el-form style="width:500px; margin:0 auto"  label-width="110px">
                    <el-form-item label="登录名：">
                        <el-input v-model="ModifyLoginname" placeholder="请输入登录名" style="width:300px" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="真实姓名：">
                        <el-input v-model="ModifyRealname" placeholder="请输入真实姓名"  style="width:300px" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="身份类型：">
                        <el-select v-model="IdentityRole" placeholder="请选择">
                            <el-option 
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="ConfirmResetuser()">确定修改</el-button>
                </div>
            </el-dialog>
            <!-- 增加管理用户 -->
            <el-dialog title="新增管理用户信息" :visible.sync="NewUsers"  center >
                <el-form style="width:500px; margin:0 auto"  label-width="110px">
                    <el-form-item label="登录名：">
                        <el-input v-model="AddUsername" placeholder="请输入登录名" style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="登录密码：">
                        <el-input type="password" v-model="LoginPassword" placeholder="请输入登录密码" style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="确认登录密码：">
                        <el-input type="password" v-model="LoginPassword1" placeholder="请再次输入登录密码" style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="真实姓名：">
                        <el-input v-model="AddRealname" placeholder="请输入真实姓名"  style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="身份类型：">
                        <el-select v-model="AddIdentityRole" placeholder="请选择">
                            <el-option 
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="ConfirmAdd()">确定添加</el-button>
                </div>
            </el-dialog>
        </div>
</template>  

<script>
import Cookies from 'js-cookie';
import { getAdminList, postAddAdmin, postEditAdmin } from '@/api/admin'
import { postDeleteAdmin, postResetPwd, postUpdatePwd } from '@/api/admin'
export default {
    name:"editPassword",
    data() {
        return {
            userName: '', // 用户昵称
            loginName: '', // 账号登录名
            realName: '', // 账号真实名
            pageIndex: 1, // 当前页码
            pageSize: 10, // 每页10条
            totalElements: 1, // 默认的总条数
            totalPages: 1, // 默认的总页数
            tableData: [], // 表格数据
            loading: true, // 加载状态
            oldPwd: '', // 账号旧密码
            newPwd1: '', // 账号新密码
            newPwd2: '', // 确认的新密码
            ResetPassword: '', // 重置密码
            ResetPassword1: '', // 确认重置密码
            LoginPassword: '', // 新增登录密码
            LoginPassword1: '', // 新增确认密码
            ModifyLoginname: '', // 修改用户登录名
            ModifyRealname: '', // 修改用户真实姓名
            AddIdentityRole: '', // 新增身份类型
            AddUsername: '', // 新增用户名
            AddRealname: '', // 新增真实姓名
            manage_userid: 0, // 修改用户Id
            Resetmanagement: 0, // 重置用户Id
            Modifyuser_id: 0, // 修改用户Id
            editVisible: false, // 修改密码弹出框状态
            ResetPopup: false, // 重置弹出框状态
            ModifyPopup: false, // 修改用户弹出窗状态
            NewUsers: false, // 新增用户弹出框状态
            paginationShow: true, // 重新显示分页
            IdentityRole: '', // 身份类型
            options: [{ // 角色数据
                value: '1',
                label: '总管理员'
                }, {
                value: '2',
                label: '审核管理人员'
                }, {
                value: '3',
                label: '交易管理人员'
            }],
            
        }
    },
    //监听
    watch: {
        
    },
    //实例创建
    created(){
        //获得 Cookies里的账号信息
        let userInfo = JSON.parse(Cookies.get('sidebarStatus'));
        // console.log(this.$route.path);
        // console.log(this.$store);
        console.log(this.$route);
        this.userName = userInfo.admin_id;
        //获得管理员账号列表
        this.getData();
    },
    //计算属性
    computed:{

    },
    //方法
    methods: {
        //获得管理员账号列表
        getData(){
            var param = {};
            param.loginName = this.loginName; // 账号登录名
            param.realName = this.realName; // 账号真实名
            param.pageIndex = this.pageIndex; // 当前页码
            param.pageSize = this.pageSize; // 当前页数
             getAdminList(param).then(res => {
                if (res.code == 200) {
                    var data = res.data; //当前返回的数据
                    data.list.forEach((value, index)=> {
                        if(value.role == '1'){
                            value.Identity = '总管理员';
                        }else if(value.role == '2'){
                            value.Identity = '审核管理人员';
                        }else if(value.role == '3'){
                            value.Identity = '交易管理人员';
                        }
                    });
                    this.tableData = data.list; //列表数据
                    this.loading = false; // 加载状态
                    this.totalElements = data.total; //总条数
                    this.totalPages = Math.ceil(data.total / this.pageSize); //总页数
                } else {
                    this.$notify.error({
                        title: "异常",
                        offset: 100,
                        message: res.msg
                    });
                }
            });
        },
        // 分页
        handleCurrentChange(val){
            if(val){
                this.pageIndex = val;
                this.getData(); 
            }
        },
        // 回车事件
        onSubmit(value) {
            this.confirm(); // 修改密码    
        },
        //确认修改密码
        confirm(){
            if(this.newPwd1 != this.newPwd2){
                this.newPwd1 = '';
                this.newPwd2 = '';
                this.$message({
                    message: '新密码两次输入不一致',
                    type: 'error'
                });
                return false;
            }else if(this.oldPwd == ''){
                this.$notify.error({
                    title: '请输入账号原密码',
                    duration: 2000,
                });
                return false;
            }else if(this.newPwd1 == ''){
                this.$notify.error({
                    title: '请输入账号新密码',
                    duration: 2000,
                });
                return false;
            }else if(this.newPwd2 == ''){
                this.$notify.error({
                    title: '请再次输入账号新密码',
                    duration: 2000,
                });
                return false;
            }
            var params = {};
            params.manageUserId = this.manage_userid; // 管理用户Id
            params.oldPwd = this.oldPwd; // 旧密码
            params.newPwd = this.newPwd1; // 新密码
            postUpdatePwd(params).then( res=> {
                if(res.code == 200){
                    this.editVisible = false; //隐藏修改密码弹出框
                    this.manage_userid = null; // 清空管理用户Id
                    this.oldPwd = ''; // 清空旧密码
                    this.newPwd1 = ''; // 清空新密码
                    this.newPwd2 = ''; // 清空新密码
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    
                }else{
                    this.$notify.error({
                        title: '修改失败',
                        duration: 2000,
                        message: '失败原因：'+res.msg
                    });
                }
            });
        },
        // 回车事件
        onresetPassword() {
            // 确认重置密码
            this.ConfirmReset();    
        },
        // 确认重置密码
        ConfirmReset() {
            //先判断两次重置密码是否一致
            if(this.ResetPassword != this.ResetPassword1){
                this.ResetPassword = '';
                this.ResetPassword1 = '';
                this.$message({
                    message: '重置密码两次输入不一致！',
                    type: 'error'
                });
                return false;
            }else if(this.ResetPassword == ''){
                this.$notify.error({
                    title: '请输入重置密码！',
                    duration: 2000,
                });
                return false;
            }else if(this.ResetPassword1 == ''){
                this.$notify.error({
                    title: '请输入再次输入重置密码！',
                    duration: 2000,
                });
                return false;
            }
            var params = {};
            params.manageUserId = this.Resetmanagement; // 重置用户Id
            params.pwd = this.ResetPassword; // 重置密码
            postResetPwd(params).then( res=> {
                // console.log(res);
                if(res.code == 200){
                    this.ResetPopup = false; // 隐藏重置密码弹出框
                    this.ResetPassword = ''; // 清空输入框
                    this.ResetPassword1 = ''; // 清空输入框
                    this.$message({
                        message: '重置成功！',
                        type: 'success'
                    });
                }else{
                    this.$notify.error({
                        title: '修改失败',
                        duration: 2000,
                        message: '失败原因：'+res.msg
                    });
                }
            });
        },
        // 确认修改用户信息
        ConfirmResetuser() {
            // 判断登录名和真实姓名
            if(this.ModifyLoginname == ''){
                this.$notify.error({
                    title: '请输入登录名！',
                    duration: 2000,
                });
                return false;
            }else if(this.ModifyRealname == ''){
                this.$notify.error({
                    title: '请输入真实姓名！',
                    duration: 2000,
                });
                return false;
            }else if(this.IdentityRole < 1){
                this.$notify.error({
                    title: '请选择用户管理身份！',
                    duration: 2000,
                });
                return false;
            }
            var params = {};
            params.manageUserId = this.Modifyuser_id; // 修改用户ID
            params.loginName = this.ModifyLoginname; // 登录名
            params.realName = this.ModifyRealname; // 真实姓名
            params.role = this.IdentityRole; // 身份角色
            postEditAdmin(params).then( res=> {
                if(res.code == 200){
                    this.ModifyPopup = false; // 修改用户弹出框
                        this.ModifyLoginname = ''; // 清空输入框
                        this.ModifyRealname = ''; // 清空输入框
                        this.IdentityRole = ''; // 清空选择框
                        this.getData(); // 更新列表
                    this.$message({
                        message: '修改成功！',
                        type: 'success'
                    });
                }else{
                    this.$notify.error({
                        title: '修改失败',
                        duration: 2000,
                        message: '失败原因：'+res.msg
                    });
                }
            });
        },
        // 确认添加管理用户
        ConfirmAdd(){
            // 判断登录名和密码
            if(this.AddUsername == ''){
                this.$notify.error({
                    title: '请输入登录名',
                    duration: 2000,
                });
                return false;
            }else if(this.LoginPassword == ''){
                this.$notify.error({
                    title: '请输入登录密码',
                    duration: 2000,
                });
                return false; 
            }else if(this.LoginPassword1 == ''){
                this.$notify.error({
                    title: '请输入确认登录密码',
                    duration: 2000,
                });
                return false; 
            }else if(this.AddRealname == ''){
                this.$notify.error({
                    title: '请输入真实姓名',
                    duration: 2000,
                });
                return false;
            }else if(this.AddIdentityRole == ''){
                this.$notify.error({
                    title: '请选择身份类型',
                    duration: 2000,
                });
                return false; 
            }else if(this.LoginPassword != this.LoginPassword1){
                this.LoginPassword = ''; // 清空输入框
                this.LoginPassword1 = ''; // 清空输入框
                this.$message({
                    message: '登录密码两次输入不一致',
                    type: 'error'
                });
                return false;
            }
            this.tableData.forEach((item, index)=> {
                if (this.AddUsername === item.login_name) {
                    this.$notify.error({
                        title: '登录名已被占用，不能重复注册！',
                        duration: 2000,
                    });
                    return false;
                }
            }); 
            var params = {};
            params.loginName = this.AddUsername;  // 登录名
            params.realName = this.AddRealname; // 真实姓名
            params.pwd = this.LoginPassword; // 登录密码
            params.role = this.AddIdentityRole;// 身份类型
            postAddAdmin(params).then( res=> {
                // console.log(res);
                if(res.code == 200){
                    this.NewUsers = false; // 新增用户弹出框
                    this.AddUsername = ''; // 清空新增登录名
                    this.AddRealname = ''; // 清空真实姓名
                    this.LoginPassword = ''; // 清空登录密码
                    this.LoginPassword1 = ''; // 清空确认登录密码
                    this.AddIdentityRole = '';// 清空身份类型
                    this.getData(); // 更新列表
                    this.$message({
                        message: '添加成功！',
                        type: 'success'
                    }); 
                }else{
                    this.$notify.error({
                        title: '添加失败',
                        duration: 2000,
                        message: '失败原因：'+res.msg
                    });
                }
            });
        },
        // 新增管理用户
        Addmanagementuser() {
            this.NewUsers = true; // 新增用户弹出框
        },
        // 修改密码
        handleEdit(index, row) {
            if(row.manage_userid && row.manage_userid > 0){
                this.editVisible = true; //显示修改密码弹出框
                this.manage_userid = row.manage_userid; // 修改用户Id
            }
        },
        // 修改用户信息
        Modifyuser(index, row) {
            // console.log(index, row);
            this.ModifyPopup = true; // 修改用户弹出框
            this.Modifyuser_id = row.manage_userid; // 修改用户Id
            this.ModifyLoginname  = row.login_name; // 登录名
            this.ModifyRealname  = row.real_name; // 真实姓名
            this.IdentityRole  = row.role; // 身份角色
        },
        // 删除用户
        DeleteUseru(index, row) {
            // console.log(index, row);
            this.$confirm('此操作将永久删除'+ row.real_name +'这个用户, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                postDeleteAdmin(row.manage_userid).then( res=> {
                    if(res.code == 200){
                        this.getData(); // 更新列表
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }else{
                        this.$notify.error({
                            title: '删除失败',
                            duration: 2000,
                            message: '失败原因：'+res.msg
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        // 重置密码
        ResetPasswords(index, row) {
            this.ResetPopup = true; // 重置弹出框
            this.Resetmanagement = row.manage_userid; // 重置用户Id
        },
    }
}
</script>
<style lang="stylus" scoped>
    
</style>
